<template>
	<view class="bg-white radius20" @click="toAction">
		<view class="u-border-bottom" style="padding: 20rpx 30rpx;">
			<view class="u-light-color u-m-b-20">{{orderItem.refusal || orderItem.status_name }}</view>
			<view class="u-line-1 u-font-32 font-medium">{{orderItem.title}}</view>
			<view class="u-flex u-row-between u-p-t-15 u-p-b-15">
				<view>
					需求预算：<text class="font-medium">￥</text><text class="u-font-32 font-medium">{{orderItem.demand_price}}</text>
				</view>
				<view>
					我的报价：<text class="font-medium u-type-primary">￥</text><text
						class="u-font-32 font-medium u-type-primary">{{orderItem.price}}</text>
				</view>
			</view>
		</view>

		<view class="u-flex u-p-30">
			<view class="avatar">
				<u-avatar :src="orderItem.user_info.avatar" size="80"></u-avatar>
			</view>
			<view class="u-flex-1 u-m-l-10"
				@click.stop="$u.route('/pages/subpage/profile/index',{id:orderItem.user_info.uid})">
				<view class="font-medium">{{orderItem.user_info.name}}</view>
				<text class=" u-font-20 u-light-color">发布于{{orderItem.add_time}}</text>
			</view>
			<u-button type="warning" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="orderItem.status==0">取消申请</u-button>

			<u-button type="default" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				class="u-m-r-10" :customStyle="customBtnStyle" v-if="orderItem.status==-4">拒绝退款</u-button>

			<u-button type="default" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				:customStyle="customBtnStyle" v-if="[1,4,-5,-6].includes(orderItem.status)">查看详情</u-button>

			<u-button type="default" hover-class="none" shape="circle" plain size="mini" @click.stop="deletelModal=true"
				:customStyle="customBtnStyle" v-if="[-1,-2,-3].includes(orderItem.status)">删除订单</u-button>

			<u-button type="default" hover-class="none" shape="circle" plain size="mini" @click.stop="toComments"
				:customStyle="customBtnStyle" v-if="orderItem.status==5 && orderItem.is_reply">查看评价</u-button>

			<u-button type="warning" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="orderItem.status==2">确认见面</u-button>

			<u-button type="warning" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="orderItem.status==3">交付服务</u-button>

			<u-button type="warning" hover-class="none" shape="circle" plain size="mini" @click.stop="toAction"
				:customStyle="{backgroundColor:'#ffffff !important'}" v-if="orderItem.status==-4">同意退款</u-button>

			<u-button type="warning" hover-class="none" shape="circle" plain size="mini" @click.stop="toEvaluate"
				:customStyle="{backgroundColor:'#ffffff !important'}"
				v-if="orderItem.status==5 && !orderItem.is_reply">去评价</u-button>
		</view>

		<u-modal v-model="deletelModal" @confirm="deleteHandle" ref="deletelModal" :async-close="true" content="确定要删除该订单吗？"
			show-cancel-button :confirm-color="$appConfig.mainColor" z-index="9999"></u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			orderItem: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#999999'
				},
				deletelModal: false
			}
		},
		onLoad() {

		},
		methods: {
			toAction() {
				if (this.orderItem.status < 0 && this.orderItem.status > -4) {
					this.$u.toast('订单已失效')
					return
				}
				this.$u.route('/pages/subpage/order/action_dem', {
					id: this.orderItem.id,
					type: 'order'
				})
			},
			// 删除订单
			deleteHandle() {
				this.$u.api.deleteApply(this.orderItem.id).then(res => {
					this.$u.toast('订单已删除')
					this.deletelModal = false
					this.$emit('change')
				})
			},
			toEvaluate() {
				this.$u.route('/pages/subpage/order/evaluate', {
					id: this.orderItem.id,
					role: 'power',
					type: 2
				})
			},
			toComments() {
				this.$u.route('/pages/subpage/order/comments', {
					id: this.orderItem.id,
					role: 'power',
					type: 2
				})
			},
			toRefund() {
				this.$u.route('/pages/subpage/order/refund', {
					id: this.orderItem.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.avatar {
		transform: scale(0.6);
	}
</style>